<!--
~ Licensed to the Apache Software Foundation (ASF) under one or more
~ contributor license agreements.  See the NOTICE file distributed with
~ this work for additional information regarding copyright ownership.
~ The ASF licenses this file to You under the Apache License, Version 2.0
~ (the "License"); you may not use this file except in compliance with
~ the License.  You may obtain a copy of the License at
~
~    http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~
-->

<div class="sp-dialog-container">
    <div class="sp-dialog-content p-15">
        <div fxFlex="100" fxLayout="column" *ngIf="clonedAssetLinks">
            <div fxLayout="column" class="link-configuration">
                <div
                    fxLayout="row"
                    fxLayoutAlign="start center"
                    class="mb-10"
                    fxFlex="100"
                >
                    <div fxLayout="row" fxLayoutAlign="start center">
                        <span class="general-options-header mb-0"
                            >Adapters</span
                        >
                    </div>
                    <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
                        <button
                            mat-button
                            mat-raised-button
                            color="accent"
                            class="small-button"
                            (click)="
                                selectAll(
                                    adapters,
                                    elementIdFunction,
                                    nameFunction,
                                    'adapter'
                                )
                            "
                            style="margin-right: 5px; margin-left: 15px"
                        >
                            <span>Select All</span>
                        </button>
                        <button
                            mat-button
                            mat-raised-button
                            class="mat-basic small-button"
                            (click)="deselectAll(adapters, elementIdFunction)"
                            style="margin-right: 10px; margin-left: 5px"
                        >
                            <span>Deselect All</span>
                        </button>
                    </div>
                </div>
                <div *ngFor="let element of adapters" fxLayout="row">
                    <mat-checkbox
                        color="accent"
                        [checked]="linkSelected(element.elementId)"
                        data-cy="manage-assets-select-adapters-checkbox"
                        (change)="
                            selectLink(
                                $event.checked,
                                element.elementId,
                                element.name,
                                'adapter'
                            )
                        "
                    >
                        {{ element.name }}
                    </mat-checkbox>
                </div>
            </div>
            <div fxLayout="column" class="link-configuration">
                <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
                    <div fxLayout="row" fxLayoutAlign="start center">
                        <span class="general-options-header mb-0"
                            >Dashboards</span
                        >
                    </div>
                    <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
                        <button
                            mat-button
                            mat-raised-button
                            color="accent"
                            class="small-button"
                            (click)="
                                selectAll(
                                    dashboards,
                                    elementIdFunction,
                                    nameFunction,
                                    'dashboard'
                                )
                            "
                            style="margin-right: 5px; margin-left: 15px"
                        >
                            <span>Select All</span>
                        </button>
                        <button
                            mat-button
                            mat-raised-button
                            class="mat-basic small-button"
                            (click)="deselectAll(dashboards, elementIdFunction)"
                            style="margin-right: 10px; margin-left: 5px"
                        >
                            <span>Deselect All</span>
                        </button>
                    </div>
                </div>
                <div *ngFor="let element of dashboards" fxLayout="row">
                    <mat-checkbox
                        color="accent"
                        [checked]="linkSelected(element.elementId)"
                        (change)="
                            selectLink(
                                $event.checked,
                                element.elementId,
                                element.name,
                                'dashboard'
                            )
                        "
                    >
                        {{ element.name }}
                    </mat-checkbox>
                </div>
            </div>
            <div fxLayout="column" class="link-configuration">
                <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
                    <div fxLayout="row" fxLayoutAlign="start center">
                        <span class="general-options-header mb-0"
                            >Data Lake Storage</span
                        >
                    </div>
                    <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
                        <button
                            mat-button
                            mat-raised-button
                            color="accent"
                            class="small-button"
                            (click)="
                                selectAll(
                                    dataLakeMeasures,
                                    elementIdFunction,
                                    measureNameFunction,
                                    'measurement'
                                )
                            "
                            style="margin-right: 5px; margin-left: 15px"
                        >
                            <span>Select All</span>
                        </button>
                        <button
                            mat-button
                            mat-raised-button
                            class="mat-basic small-button"
                            (click)="
                                deselectAll(dataLakeMeasures, elementIdFunction)
                            "
                            style="margin-right: 10px; margin-left: 5px"
                        >
                            <span>Deselect All</span>
                        </button>
                    </div>
                </div>
                <div *ngFor="let element of dataLakeMeasures" fxLayout="row">
                    <mat-checkbox
                        color="accent"
                        [checked]="linkSelected(element.elementId)"
                        (change)="
                            selectLink(
                                $event.checked,
                                element.elementId,
                                element.measureName,
                                'measurement'
                            )
                        "
                    >
                        {{ element.measureName }}
                    </mat-checkbox>
                </div>
            </div>
            <div fxLayout="column" class="link-configuration">
                <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
                    <div fxLayout="row" fxLayoutAlign="start center">
                        <span class="general-options-header mb-0"
                            >Data Streams</span
                        >
                    </div>
                    <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
                        <button
                            mat-button
                            mat-raised-button
                            color="accent"
                            class="small-button"
                            (click)="
                                selectAll(
                                    dataSources,
                                    elementIdFunction,
                                    nameFunction,
                                    'data-source'
                                )
                            "
                            style="margin-right: 5px; margin-left: 15px"
                        >
                            <span>Select All</span>
                        </button>
                        <button
                            mat-button
                            mat-raised-button
                            class="mat-basic small-button"
                            (click)="
                                deselectAll(dataSources, elementIdFunction)
                            "
                            style="margin-right: 10px; margin-left: 5px"
                        >
                            <span>Deselect All</span>
                        </button>
                    </div>
                </div>
                <div *ngFor="let source of dataSources" fxLayout="row">
                    <mat-checkbox
                        color="accent"
                        [checked]="linkSelected(source.elementId)"
                        data-cy="manage-assets-select-data-sources-checkbox"
                        (change)="
                            selectLink(
                                $event.checked,
                                source.elementId,
                                source.name,
                                'data-source'
                            )
                        "
                    >
                        {{ source.name }}
                    </mat-checkbox>
                </div>
            </div>
            <div fxLayout="column" class="link-configuration">
                <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
                    <div fxLayout="row" fxLayoutAlign="start center">
                        <span class="general-options-header mb-0"
                            >Data Views</span
                        >
                    </div>
                    <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
                        <button
                            mat-button
                            mat-raised-button
                            color="accent"
                            class="small-button"
                            (click)="
                                selectAll(
                                    dataViews,
                                    elementIdFunction,
                                    nameFunction,
                                    'data-view'
                                )
                            "
                            style="margin-right: 5px; margin-left: 15px"
                        >
                            <span>Select All</span>
                        </button>
                        <button
                            mat-button
                            mat-raised-button
                            class="mat-basic small-button"
                            (click)="deselectAll(dataViews, elementIdFunction)"
                            style="margin-right: 10px; margin-left: 5px"
                        >
                            <span>Deselect All</span>
                        </button>
                    </div>
                </div>
                <div *ngFor="let element of dataViews" fxLayout="row">
                    <mat-checkbox
                        color="accent"
                        [checked]="linkSelected(element.elementId)"
                        (change)="
                            selectLink(
                                $event.checked,
                                element.elementId,
                                element.name,
                                'data-view'
                            )
                        "
                    >
                        {{ element.name }}
                    </mat-checkbox>
                </div>
            </div>
            <div fxLayout="column" class="link-configuration">
                <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
                    <div fxLayout="row" fxLayoutAlign="start center">
                        <span class="general-options-header mb-0">Files</span>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
                        <button
                            mat-button
                            mat-raised-button
                            color="accent"
                            class="small-button"
                            (click)="
                                selectAll(
                                    files,
                                    fileIdFunction,
                                    filenameFunction,
                                    'file'
                                )
                            "
                            style="margin-right: 5px; margin-left: 15px"
                        >
                            <span>Select All</span>
                        </button>
                        <button
                            mat-button
                            mat-raised-button
                            class="mat-basic small-button"
                            (click)="deselectAll(files, fileIdFunction)"
                            style="margin-right: 10px; margin-left: 5px"
                        >
                            <span>Deselect All</span>
                        </button>
                    </div>
                </div>
                <div *ngFor="let element of files" fxLayout="row">
                    <mat-checkbox
                        color="accent"
                        [checked]="linkSelected(element.fileId)"
                        (change)="
                            selectLink(
                                $event.checked,
                                element.fileId,
                                element.filename,
                                'file'
                            )
                        "
                    >
                        {{ element.filename }}
                    </mat-checkbox>
                </div>
            </div>
            <div fxLayout="column" class="link-configuration">
                <div fxLayout="row" fxLayoutAlign="start center" class="mb-10">
                    <div fxLayout="row" fxLayoutAlign="start center">
                        <span class="general-options-header mb-0"
                            >Pipelines</span
                        >
                    </div>
                    <div fxLayout="row" fxLayoutAlign="end center" fxFlex>
                        <button
                            mat-button
                            mat-raised-button
                            color="accent"
                            class="small-button"
                            (click)="
                                selectAll(
                                    pipelines,
                                    elementIdFunction,
                                    nameFunction,
                                    'pipeline'
                                )
                            "
                            style="margin-right: 5px; margin-left: 15px"
                        >
                            <span>Select All</span>
                        </button>
                        <button
                            mat-button
                            mat-raised-button
                            class="mat-basic small-button"
                            (click)="deselectAll(pipelines, elementIdFunction)"
                            style="margin-right: 10px; margin-left: 5px"
                        >
                            <span>Deselect All</span>
                        </button>
                    </div>
                </div>
                <div *ngFor="let pipeline of pipelines" fxLayout="row">
                    <mat-checkbox
                        color="accent"
                        [checked]="linkSelected(pipeline.elementId)"
                        (change)="
                            selectLink(
                                $event.checked,
                                pipeline.elementId,
                                pipeline.name,
                                'pipeline'
                            )
                        "
                        >{{ pipeline.name }}</mat-checkbox
                    >
                </div>
            </div>
        </div>
    </div>
    <mat-divider></mat-divider>
    <div class="sp-dialog-actions">
        <button
            mat-button
            mat-raised-button
            data-cy="assets-update-links-button"
            color="accent"
            (click)="store()"
            style="margin-right: 10px"
        >
            Update links
        </button>
        <button
            mat-button
            mat-raised-button
            class="mat-basic"
            (click)="cancel()"
            style="margin-right: 10px"
        >
            Cancel
        </button>
    </div>
</div>
